import React, {FC, useCallback, useEffect, useMemo, useState} from "react";
import "./css/PreviewModal.less";
import {getComConfigBySuffix} from "../../services/PreviewService.tsx";
import {getPreviewFileByFileLinkId} from "../../services/FileService.tsx";
import {formatLangStr} from "../../utils";

interface PreviewModalProps {
    data: any,
    fileField: string,
    fileNameField: string,
    fileIdField: string,
    suffixField: string,
    operate: string,
}

const PreviewModal: FC<PreviewModalProps> = (props) => {

    const [fileInfo, setFileInfo] = useState<any>(null);


    const formatFileInfo: Function = useCallback(async (data: any) => {
        const {
            fileField = "file",
            fileNameField = "fileName",
            fileIdField = "id",
            suffixField = "extName",
        } = props;
        let fileInfo: any = {...data};
        fileInfo.previewKey = data[fileIdField];
        fileInfo.fileName = fileInfo[formatLangStr(fileNameField)];
        if (fileInfo[suffixField]) {
            // 支持截取文件名后缀
            const suffixArr: string[] = fileInfo[suffixField].split(".");
            fileInfo[suffixField] = suffixArr[suffixArr.length - 1];
        }
        if (!fileInfo.comConfig) {
            fileInfo.comConfig = getComConfigBySuffix(fileInfo[suffixField]);
        }
        if (!fileInfo[fileField]) {
            const fileId = fileInfo[fileIdField];
            fileInfo[fileField] = await getPreviewFileByFileLinkId(fileId)
        }
        return fileInfo;
    }, [props]);

    const init: Function = useCallback(async () => {
        const {data}: {
            data: any,
        } = props;
        const fileInfo = await formatFileInfo(data);
        setFileInfo(fileInfo);
    }, []);

    useEffect(() => {
        init()
    }, [props]);

    const renderPreviewFile = useMemo(() => {
        if (!fileInfo) {
            return null;
        }
        const {fileField = "file", fileIdField = "id", suffixField = "extName"}:
            {
                fileField: string,
                fileIdField: string,
                suffixField: string
            } = props;
        let Com = fileInfo.comConfig.component
        return (
            <div id={fileInfo.previewKey}
                 className={"sf_core_preview_modal_content"}>
                <Com {...fileInfo.comConfig.props}
                     previewKey={fileInfo.previewKey}
                     file={fileInfo[fileField]}
                     fileName={fileInfo.name}
                     viewType={fileInfo.comConfig?.is3D ? '3D' : '2D'}
                     fileId={fileInfo[fileIdField]}
                     suffix={fileInfo[suffixField]}
                     fileInfo={fileInfo}
                />
            </div>
        )
    }, [fileInfo, props.suffixField]);

    const renderPreviewModal = useMemo(() => {
        return (
            <div className="sf_core_preview_modal">
                {renderPreviewFile}
            </div>
        )
    }, [fileInfo]);
    return (renderPreviewModal);
};

export default React.memo(PreviewModal);